<template>
  <z-space vertical>
    <zw-row :gutter="40">
      <zw-col :span="12">
        <h3>布局一：typea</h3>
        <z-panel :bodystyle="{backgroundColor:'#666'}" class="zpanel" type="typea">
          <div slot="top" class="colors z-p-5">top内容top内容top内容</div>
          <div slot="content" class="colors z-m-t-10 z-p-10">
            <div>
              content内容content内容content内容content内容content内容content内容content内容content内容content内容ent内容content内容content内容content内容content内容
              ent内容content内容content内容content内容content内容ent内容content内容content内容content内容content内容ent内容content内容content内容content内容content内容
            </div>
          </div>
        </z-panel>
        <vue-code-mirror :tpl="d.tpl"></vue-code-mirror>

      </zw-col>
      <zw-col :span="12">
        <h3>布局二：typeb</h3>
        <z-panel class="zpanel" type="typeb">
          <div slot="top" class="colors z-p-5">
            top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容
          </div>
          <div slot="content" class="colors z-m-t-10 z-p-10">
            <div>content内容content内容content内容content内容content内容content内容content内容content内容content内容</div>
          </div>
          <div slot="right" class="colors z-p-5">
            <div>
              right内容right内容right内容right内容right内容right内容right内容right内容right内容right内容right内容right内容right内容right内容right内容right内容
            </div>
          </div>
        </z-panel>
        <vue-code-mirror :tpl="d.tpl2"></vue-code-mirror>

      </zw-col>
      <zw-col :span="12">
        <h3>布局三：typec</h3>
        <z-panel class="zpanel" type="typec">
          <div slot="left" class="colors z-p-5">
            left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容
            left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容left内容
            left内容left内容left内容left内容left内容left内容left内容
          </div>
          <div slot="r-top" class="colors z-p-10">
            r-top内容r-top内容r-top内容r-top内容r-top内容r-top内容
          </div>
          <div slot="r-mid" class="colors z-p-5 z-m-t-10">
            r-mid内容 r-mid内容 r-mid内容 r-mid内容 r-mid内容 r-mid内容
          </div>
          <div slot="r-bot" class="colors z-p-5 z-m-t-10">
            r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容
            r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容
            r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容
          </div>
        </z-panel>
        <vue-code-mirror :tpl="d.tpl3"></vue-code-mirror>
      </zw-col>
      <zw-col :span="12">
        <h3>布局四：typed</h3>
        <z-panel class="zpanel" type="typed">
          <div slot="top" class="colors z-p-5 z-a-c">
            top内容top内容
          </div>
          <div slot="content" class="colors z-p-10 z-m-t-10">
            content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容
            content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容content内容
          </div>
        </z-panel>
        <vue-code-mirror :tpl="d.tpl4"></vue-code-mirror>

      </zw-col>
      <zw-col :span="12">
        <h3>布局五：typee</h3>
        <z-panel class="zpanel" type="typee">
          <div slot="left" class="colors z-p-5">
            left内容left内容
          </div>
          <div slot="r-top" class="colors z-p-5">
            r-top内容r-top内容
          </div>
          <div slot="r-bot" class="colors z-p-5 z-m-t-10">
            r-top内容r-top内容
          </div>
        </z-panel>
        <vue-code-mirror :tpl="d.tpl5"></vue-code-mirror>
      </zw-col>
      <zw-col :span="12">
        <h3>布局六：typef</h3>
        <z-panel class="zpanel" type="typef">
          <div slot="top-l" class="colors z-p-5">
            top-l内容top-l内容
          </div>
          <div slot="top-r" class="colors z-p-5">
            top-r内容top-r内容
          </div>
          <div slot="bot" class="colors z-p-5 z-m-t-10">
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
          </div>
        </z-panel>
        <vue-code-mirror :tpl="d.tpl6"></vue-code-mirror>
      </zw-col>
      <zw-col :span="12">
        <h3>布局七：typeg</h3>
        <z-panel class="zpanel" type="typeg">
          <div slot="top" class="colors z-p-5">
            top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
          </div>
          <div slot="mid" class="colors z-p-5 z-m-t-10">
            mid内容mid内容mid内容mid内容
          </div>
          <div slot="bot" class="colors z-p-5 z-m-t-10">
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
          </div>
        </z-panel>
        <vue-code-mirror :tpl="d.tpl7"></vue-code-mirror>
      </zw-col>
      <zw-col :span="12">
        <h3>布局八：typeh</h3>
        <z-panel class="zpanel" type="typeh">
          <div slot="top" class="colors z-p-5">
            top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
          </div>
          <div slot="bot">
            <zw-row :gutter="10" class="z-m-t-10">
              <zw-col v-for="(item,index) in 4" :span="6" class="colors z-p-5">{{ index }}</zw-col>
            </zw-row>
          </div>
        </z-panel>
        <vue-code-mirror :tpl="d.tpl8"></vue-code-mirror>
      </zw-col>
    </zw-row>
  </z-space>
</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";

export default {
  name: "layoutpanel",
  components: {VueCodeMirror},
  data() {
    return {
      d: {
        tpl: `         <z-panel :bodystyle="{backgroundColor:'#666'}"  type="typea">
          <div slot="top" class="z-p-5">top内容top内容top内容</div>
          <div slot="content" class="z-m-t-10 z-p-10">
            <div>
              content内容content内容content内容content内容content内容
            </div>
          </div>
        </z-panel>`,
        tpl2: `         <z-panel type="typeb">
          <div slot="top" class="z-p-5">
            top内容top内容top内容top内容
          </div>
          <div slot="content" class="z-m-t-10 z-p-10">
            <div>content内容content内容content内容content内容</div>
          </div>
          <div slot="right" class="z-p-5">
            <div>
              right内容right内容right内容right内容right内容right内容right内容right内容
            </div>
          </div>
        </z-panel>`,
        tpl3: `         <z-panel type="typec">
          <div slot="left" class="z-p-5">
            left内容left内容left内容left内容
          </div>
          <div slot="r-top" class="z-p-10">
            r-top内容r-top内容r-top内容r-top内容r-top内容
          </div>
          <div slot="r-mid" class="z-p-5 z-m-t-10">
            r-mid内容 r-mid内容 r-mid内容 r-mid内容 r-mid内容
          </div>
          <div slot="r-bot" class="z-p-5 z-m-t-10">
            r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容r-bot内容
          </div>
        </z-panel>`,
        tpl4: `        <z-panel type="typed">
            <div slot="top" class="z-p-5 z-a-c">
              top内容top内容
            </div>
            <div slot="content" class="z-p-10 z-m-t-10">
              content内容content内容content内容content内容content内容content内容
            </div>
        </z-panel>`,
        tpl5: `        <z-panel type="typee">
          <div slot="left" class="z-p-5">
            left内容left内容
          </div>
          <div slot="r-top" class="z-p-5">
            r-top内容r-top内容
          </div>
          <div slot="r-bot" class="z-p-5 z-m-t-10">
            r-top内容r-top内容
          </div>
        </z-panel>`,
        tpl6: `         <z-panel type="typef">
          <div slot="top-l" class="z-p-5">
            top-l内容top-l内容
          </div>
          <div slot="top-r" class="z-p-5">
            top-r内容top-r内容
          </div>
          <div slot="bot" class="z-p-5 z-m-t-10">
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
          </div>
        </z-panel>`,
        tpl7: `         <z-panel type="typeg">
          <div slot="top" class="z-p-5">
            top内容top内容top内容top内容top内容top内容top内容top内容top内容bot内容bot内容bot内容bot内容
          </div>
          <div slot="mid" class="z-p-5 z-m-t-10">
            mid内容mid内容mid内容mid内容
          </div>
          <div slot="bot" class="z-p-5 z-m-t-10">
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
          </div>
        </z-panel>`,
        tpl8: `         <z-panel class="zpanel" type="typeh">
          <div slot="top" class="colors z-p-5">
            top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容top内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
            bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容bot内容
          </div>
          <div slot="bot">
            <zw-row :gutter="10" class="z-m-t-10">
              <zw-col v-for="(item,index) in 4" :span="6" class="colors z-p-5">{{ index }}</zw-col>
            </zw-row>
          </div>
        </z-panel>`,

      },
    }
  }
}
</script>

<style scoped>
.zpanel /deep/ .el-card
.el-card__body {
  background-color: #e8e8e8;
}

.zpanel .colors {
  background-color: #909399
}
</style>
